<template>
  <div>
    <div style="display: flex;justify-content: space-evenly">
      <div class="block">
        <span class="demonstration">开始日期</span>
        <el-date-picker
          v-model="listQuery.startDate"
          align="right"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">结束</span>
        <el-date-picker
          v-model="listQuery.endDate"
          align="right"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </div>

    <div>
    <div  class="zhu" style="display:inline-block">
      <div style="width: 90vh;height: 70vh;display:inline-block;" id="main3"></div>
    </div>
    <div  class="zhe" style="display:inline-block;position:absolute;top: 70px">
      <div style="width: 90vh;height: 70vh;display:inline-block" id="main4"></div>
    </div>
    </div>
  </div>
</template>

<script>

  import {getSginChartData} from "../../api/sign";

  export default {
    name: "signCount",
    data() {
      return {
        listQuery: {
          startDate: null,
          endDate: null,
        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        option: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: [],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '未签到',
              type: 'bar',
              barWidth: '60%',
              data: []
            }
          ]
        },
        brokenLineOption: {
          xAxis: {
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [],
              type: 'line'
            }
          ]
        }
      }
    },
    methods: {
      //初始化echarts
      echartsInit() {
        console.log("echart执行")
        //柱形图
        //因为初始化echarts 的时候，需要指定的容器 id='main'
        console.log(this.option)
        this.$echarts.init(document.getElementById('main3')).setOption(this.option)
        this.$echarts.init(document.getElementById('main4')).setOption(this.brokenLineOption)

      },
      //获取列表信息
      getSginCountData(param) {
        getSginChartData(this.listQuery).then(res => {
          console.log(res)
          this.option.xAxis[0].data = res.data.dateList
          this.option.series[0].data = res.data.countList
          this.brokenLineOption.xAxis.data = res.data.dateList
          this.brokenLineOption.series[0].data = res.data.countList
          this.echartsInit()
        })
      },
      //查询
      onSubmit(){
        this.getSginCountData()
      }
    },
    created() {


    },
    activated() {
      // this.echartsInit()
    },
    mounted() {
      this.getSginCountData()

      // 在通过mounted调用即可
      // this.echartsInit()
    },
  }
</script>

<style scoped>

</style>
